<!-- 记录组件  -->

<template>
	<view class="record">
		<view class="mb20" v-for="(item,index) in newList" :key="index">
			<view class="recordItem">
				<view class="recordChild">
					<view @click.stop="delectTimeTap(index)"  class="close">
						<image src="../../static/images/del.png" mode=""></image>
					</view>
					<view class="75%">服药时段</view>
				</view>
				<picker v-if="istime == 'period'" mode="time"  @change="changeTimePicker(index,$event)">
					<view class="">{{item.time.length<6?item.time:'请选时间'}} <text class="icon arrow"></text> </view>
				</picker>
				
				<view  v-else class="" @click="selectTime(index)" >{{item.time?item.time:'请选时间'}}<text class="icon arrow"></text></view>
			</view> 
			<view class="recordItem" v-for="(it,ind) in item.med" :key="ind"  @click="path(`/plugins/medicine/index?data=${JSON.stringify(it)}&pi=${index}&ci=${ind}`)">
				<view class="recordChild">
					<view @click.stop="delectTap(index,ind)" class="close">
						<image src="../../static/images/del.png" mode=""></image>
					</view>
					<view class="recordName">{{it.med_name}}{{it.spec}}</view>
				</view>
				<view class="recordChild">
					<view class="">{{it.dosage}}</view>
					<view class="icon arrow"></view>
				</view>
			</view>
			<view class="recordItem">
				<view class="recordChild">
					<view  class="close"></view>
					<view class="recordName">药物</view>
				</view>
				<view class="recordChild" @click="path(`/plugins/medicine/index?pi=${index}&ci=-1`)">
					<view class="">添加</view>
					<view class="icon arrow"></view>
				</view>
			</view>
		</view>
		<lk-timeperiod :show="showPeriod" @submit="submit" @cancel="cancel"></lk-timeperiod>
	</view>
</template>

<script>
	import lkTimeperiod from '../lk-timeperiod/index.vue'
	
	export default {
		name:"",
		data() {
			return {
				showPeriod:false,
				periodIndex:0,
				startTime:'',
				endTime:''
			}
		},
		props:{
			lists:{
				type:Array,
				default:()=>{
					return []
				}
			},
			types:{
				type:String,
				default:''
			},
			paths:{
				type:String,
				default:''
			},
			istime:{
				type:String,
				default:""
			}
		},
		components:{
			lkTimeperiod
		},
		computed:{
			newList(){
				this.$set(this.lists,'time',this.$utils.getTime(new Date(), 'h:m'))
				return this.lists.length>0 ? this.lists : this.lists
			},
		},
		methods: {
			/** 单时间返回
			 * @param {Object} e 弹窗返回数据
			 * @param {Object} i 第几个
			 */
			changeTimePicker(i,e){
				this.$emit('change',{i,time:e.detail.value})
			},
			// 删除时间段
			delectTimeTap(index){
				let _this = this;
				uni.showModal({
					title:"提示",
					content:"确定要删除？",
					success(res){
						if(res.confirm){
							_this.$emit('delectTimeTap',index)
						}
					}
				})
			},
			// 删除数据
			delectTap(index,ind){
				let _this = this;
				uni.showModal({
					title:"提示",
					content:"确定要删除？",
					success(res){
						if(res.confirm){
							_this.$emit('delectTap',{index,ind})
						}
					}
				})
			},
			//  弹起时间段弹窗
			selectTime(index){
				
				this.showPeriod = true;
				this.periodIndex = index;
			},
			// 取消时间段弹窗
			cancel(){
				this.showPeriod = false;
			},
			/** 时间段弹窗点击确定
			 * @param {Object} e 子组件lkTimeperiod返回时间段
			 */
			submit(e){
				this.$emit('change',{i:this.periodIndex,time:e})
				this.showPeriod = false;
			},
			// 页面跳转
			path(url){
				this.$routeJump.navigateTo(url)
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.recordItem{
		padding: 20rpx 0;
		font-size: 36rpx;
		@include flex(space-between,center);
		.recordChild{
			@include flex(flex-start,center);
			font-size: 32rpx;
	
			.recordName{
				width:470rpx;
			}
		}
		.close{
			width:46rpx;
			height: 46rpx;
			margin-right: 14rpx;
		}
	}
</style>
